<template>
    <div class="goods">
      <el-row>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品添加</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>

      <el-steps :active="active" align-center>
        <el-step title="步骤1" ></el-step>
        <el-step title="步骤2" ></el-step>
        <el-step title="步骤3" ></el-step>
        <el-step title="步骤4" ></el-step>
        <el-step title="步骤5" ></el-step>
      </el-steps>

      <el-form ref="form" label-width="80px">
            <el-tabs v-model="activeName" @tab-click="handleClick" tab-position='left'>
                <el-tab-pane label="基本信息" name="one">
                        <el-form-item label="商品名称">
                            <el-input v-model="form.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格">
                            <el-input v-model="form.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量">
                            <el-input v-model="form.goods_weight"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量">
                            <el-input v-model="form.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类">
                            <el-cascader
                                v-model="selectedOptions"
                                :options="options"
                                :props="props"
                                @change="handleChange">
                            </el-cascader>                           
                        </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品参数" name="two">商品参数</el-tab-pane>
                <el-tab-pane label="商品属性" name="three">商品属性</el-tab-pane>
                <el-tab-pane label="商品图片" name="four">
                    <el-upload
                        class="upload-demo"
                        action="http://localhost:8888/api/private/v1/upload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        :file-list="fileList"
                        :headers="setHeaders()"
                        list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容" name="five">
                    <el-input type="textarse" v-model="form.goods_introduce"></el-input>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <el-button type="primary" round class="php-sub" @click="addGoodsSubmit">提交</el-button>
    </div>
</template>


<script>
import {getGoodsCateList,addGoods} from '@/api/index.js'
export default {
    data(){
        return {
            //表单属性
            form: {
                goods_name: '',
                goods_price: '',
                goods_weight: '',
                goods_number: '',
                goods_cat: '',  //逗号隔开
                goods_introduce:'',
                pics:[]
            },
            //操作步骤&tab框属性
            active: 1,
            activeName: 'one',
            props:{
               value:'cat_id',
               label:'cat_name'
            },
            selectedOptions:[],
            options:[],
            fileList: []
        }
    },
    //页面加载时触发
    created:function(){
        //商品分类
        getGoodsCateList(3,1,10000).then(res=>{
            if(res.meta.status === 200){
                this.options = res.data.result
            }
        })
    },
    methods: {
         setHeaders:function(){
             var token = localStorage.getItem('mytoken')
             return {Authorization:token}
         },   
        //商品添加--提交
        addGoodsSubmit: function() {
            console.log(this.form)
            if(this.selectedOptions.length!=3){
                this.$message.error('商品分类必须为三级')
                return
            }
        //获取商品分类数据
        this.form.goods_cat = this.selectedOptions.join(',')
        //发送请求
        addGoods(this.form).then(res=>{
            if(res.meta.status == 201) {
                this.$message({           
                    message:res.meta.msg,
                    type:'success'
                })
                this.$router.push({name:'Goods'})
            }else{
                this.$message.error(res.meta.msg)
            }
        })
    },
    handleClick(tab, event) {
        // console.log(tab, event);
        console.log(tab.name)
        switch(tab.name) {
            case 'one':
                this.active = 1
                break;
            case 'two':
                this.active = 2
                break;
            case 'three':
                this.active = 3
                break;
            case 'four':
                this.active = 4
                break;
            case 'five':
                this.active = 5
                break;
            default:
                this.active = 1
        }
    },
    handleChange(value) {
        console.log(value);
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePreview(file) {
        console.log(file);
    },
    handleSuccess:function(response,file,fileList){
        this.form.pics.push({
            pic:response.data.tmp_path
        })
    }
}
}
</script>

<style scoped>
.php-sub {
    margin-left: 10px;
}
.php-steps { 
    width: 80%;
    margin: auto;
    margin-bottom: 10px;
}
</style>